<template>
  <!-- 加载组件 -->
  <template v-if="loadingIsShow">
    <van-loading type="spinner" />
  </template>

  <template v-else>
    <div class="search-tips">
      <div class="play-but">
        <!-- 播放所有及下载组件 -->
        <play-all-vue></play-all-vue>
        <button-component-vue
          :buttonDataSubscribed="buttonDataSubscribed"
        ></button-component-vue>
      </div>
      <!-- 搜索到... -->
      <div class="tips-text">
        找到单曲约 {{ searchData.result.songCount }} 首
      </div>
    </div>

    <!-- 音乐列表组件 -->
    <sings-list-vue :searchData="searchData" :orderIndex="(paging.page - 1) * paging.limit"></sings-list-vue>
    <!-- 分页组件 -->
    <paging-vue :paging="paging"></paging-vue>
  </template>
</template>

<script setup>
import { ref, reactive, watch ,onMounted } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import axios from "axios";
import singsListVue from "../../../components/singsList/singsList.vue";
import PlayAllVue from "../../../components/playAll/playAll.vue";
import ButtonComponentVue from "../../../components/button/buttonComponent.vue";
import pagingVue from "../../../components/paging/paging.vue";

const route = useRoute();
const store = useStore();

// 传值给按钮
const buttonDataSubscribed = ["iconfont icon-xiazai", "下载全部"];

// loading
const loadingIsShow = ref(true);

// 获取音乐列表数据
const searchData = ref("");
searchData.value = store.state.m_search.searchData;

/**
 * 分页
 * page 页码
 * offset 偏移量  page * offset = limit
 */
// 分页数据传递给分页器
let paging = reactive({
  limit: 30,
  page: 1,
});

// 搜索结果列表
const getSearchData = () => {
  axios
    .get(
      `/cloudsearch?keywords=${store.state.m_search.searchTitle}&limit=${
        paging.limit
      }&offset=${(paging.page - 1) * paging.limit}&type=1`
    )
    .then((res) => {
      console.log(res.data);
      store.commit("m_search/updateSearchData", res.data);
      searchData.value = res.data;
      loadingIsShow.value = false;
    })
    .catch((err) => {
      loadingIsShow.value = false;
      console.log(err);
    });
};

// Dom渲染完毕发起请求
onMounted(()=>{
  getSearchData();  
})

// 监听页码改变 重新发起请求
watch(
  () => paging.page,
  () => {
    getSearchData()
  },
  { deep: true, immediate: true }
);
</script>
<style lang='less'>
.search-tips {
  display: flex;
  justify-content: space-between;
  align-items: baseline;

  .tips-text {
    color: rgb(0 0 0 / 32%);
  }
  .play-but {
    display: flex;
    margin: 5px 0 15px 0;

    .button-components {
      margin-left: 10px;
    }
  }
}
</style>